<template>
	<view>
		<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" @cancel="handleCancel">
			<slot></slot>
		</picker>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				multiArray: [],
				multiIndex: [0, 0, 0, 0, 0, 0],
			}
		},
		methods: {
			bindMultiPickerColumnChange: function(e) {
				// console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value
				let year = this.multiArray[0][this.multiIndex[0]].slice(0, -1)
				let month = this.multiArray[1][this.multiIndex[1]].slice(0, -1)
				let moon = this.multiArray[3][this.multiIndex[3]]
				//在当前月份上做修改
				if(e.detail.column<=1){
					this.resetDays(year,month)
				}
				if(e.detail.column===3){
					this.resetHours(moon)
				}
				//标准化日期
				let date=this.normalizeDate(year,month)
				this.$emit("confirm", date)
				this.$forceUpdate()
			},
			normalizeDate(year,month){
				month = month.padStart(2, '0')
				let day = this.multiArray[2][this.multiIndex[2]].slice(0, -1).padStart(2, '0')
				let moon = this.multiArray[3][this.multiIndex[3]]
				let hour = this.multiArray[4][this.multiIndex[4]]
				let minutes = this.multiArray[5][this.multiIndex[5]]
				hour = hour.toString().padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minutes}`
			},
			resetHours(type){
				let hours=[]
				if(type==="上午"){
					hours=new Array(12).fill('').map((item, index) => index)
				}else{
					let hour=12
					hours=new Array(12).fill('').map((item, index) => hour++)
				}
				this.$set(this.multiArray, 4, hours)
			},
			resetDays(year,month) {
				//选择的是当前年份
				let days = this.getDays(year, month) //获取新选择的年份，月份有多少天
				this.$set(this.multiArray, 2, new Array(days).fill('').map((item, index) => `${++index}日`))
			},
			initDate(){
				const date = new Date()
				let year = date.getFullYear() //当前年份
				let month = date.getMonth() //当前月份
				let day = date.getDate() //当前天数
				let currMonthDays = new Date(year, month + 1, 0).getDate() //这个月有多少天
				let days = new Array(currMonthDays).fill('').map((item,index) => `${++index}日`)
				let years = new Array(5).fill('').map(() => `${year++}年`)
				let months = new Array(12).fill('').map((item,index) => `${++index}月`)
				let hours=[]
				if(date.getHours()<12){
					hours=new Array(12).fill('').map((item, index) => index)
				}else{
					let hour=12
					hours=new Array(12).fill('').map((item, index) => hour++)
				}
				let minutes = new Array(60).fill('').map((item,index) => (index).toString().padStart(2,0))
				this.multiArray = [
					years,
					months,
					days,
					["上午","下午"],
					hours,
					minutes,
				]
				this.getCurrDate(years,months,days,hours,minutes)
			},
			//获取当前时间
			getCurrDate(years,months,days,hours,minutes){
				const date = new Date()
				let year = date.getFullYear()+"年" //当前年份
				let month = date.getMonth()+1+"月"//当前月份
				let day = date.getDate()+"日" //当前天数
				let hour =date.getHours() 
				let minute= date.getMinutes()
				//特殊，需要整点，大于30为0，小于30就为30
				if(minute>30){
					hour=hour===23?0:hour
					minute=0
				}else{
					minute=30
				}
				let yearIndex=years.findIndex(item=>item==year)
				let monthIndex=months.findIndex(item=>item==month)
				let dayIndex=days.findIndex(item=>item==day)
				let hourIndex=hours.findIndex(item=>item==hour)
				let minuteIndex=minutes.findIndex(item=>item==minute)
				this.multiIndex= [yearIndex, monthIndex,dayIndex, hour>=12?1:0, hourIndex, minuteIndex]
			},
			getDays(year, month) {
				return new Date(year, month, 0).getDate()
			},
			handleCancel(){
				this.$emit("confirm", '')
			}
		},
		created(){
			this.initDate()
		}
	}
</script>

<style>
</style>
